<template>
  <div class="tab-bar">
    <div class="item" @click="changeTabbar(index)" v-for="(item, index) in navArr" :key="index" :class="index === tempCurr ? 'active' : ''">
      <div class="iconfont" :class="item.iconClass"></div>
      <div class="txt">
        <!-- <router-link :to="item.path">{{ item.title }}</router-link> -->
        <a>{{ item.title }}</a>
      </div>
    </div>
  </div>
</template>

<script>
//@click="changeTabbar(index)"
//#region
/*
<div class="item" :class="{ active: isShow }" @click="menuClick('/home')">
      <div class="iconfont icon-home"></div>
      <div class="txt">
        <a href="/">首页</a>
      </div>
    </div>
    <div class="item" @click="menuClick('/category')" :class="{ active: isShow }">
      <div class="iconfont icon-libao"></div>
      <div class="txt">
        <a href="/category">分类</a>
      </div>
    </div>
    <div class="item" @click="menuClick('/shopcart')" :class="{ active: isShow }">
      <div class="iconfont icon-gouwuchekong shopcar"><span class="count">0</span></div>
      <div class="txt">
        <a href="/shopcart">购物车</a>
      </div>
    </div>
    <div class="item" @click="menuClick('/user')" :class="{ active: isShow }">
      <div class="iconfont icon-wode"></div>
      <div class="txt">
        <a href="/user">我的</a>
      </div>
    </div>
*/
//#endregion
export default {
  name: 'TabBar',
  props: ['page'],
  data() {
    return {
      isShow: false,
      tempCurr: '',
      navArr: [
        {
          title: '首页',
          path: '/',
          iconClass: 'icon-home',
        },
        {
          title: '分类',
          path: '/category',
          iconClass: 'icon-libao',
        },
        {
          title: '购物车',
          path: '/shopcart',
          iconClass: 'icon-gouwuchekong',
        },
        {
          title: '我的',
          path: '/user',
          iconClass: 'icon-wode',
        },
      ],
    }
  },
  watch: {
    page(data) {
      this.tempCurr = data
      if (data === 0) {
        this.$router.push('/').catch(() => {})
      } else if (data === 1) {
        this.$router.push('/category').catch(() => {})
      } else if (data === 2) {
        this.$router.push('/shopcar').catch(() => {})
      } else if (data === 3) {
        this.$router.push('/user').catch(() => {})
      }
    },
  },
  methods: {
    changeTabbar(index) {
      // console.log('index:', index);
      if (index === 0) {
        this.$router.push('/').catch(() => {})
      } else if (index === 1) {
        this.$router.push('/category').catch(() => {})
      } else if (index === 2) {
        this.$router.push('/shopcart').catch(() => {})
      } else if (index === 3) {
        this.$router.push('/user').catch(() => {})
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: -1px;
  left: 0;
  z-index: 1;
  display: flex;
  padding: 20px 0;
  width: 100%;
  height: 50px;
  background-color: white;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    .iconfont {
      font-size: 34px;
      margin-bottom: 10px;
    }
    .shopcar {
      position: relative;
    }
    .count {
      position: absolute;
      top: -10px;
      right: -20px;
      width: 30px;
      height: 30px;
      background-color: red;
      color: white;
      text-align: center;
      line-height: 30px;
      border-radius: 50%;
    }
    .active {
      color: red;
    }
  }
}
</style>
